<template>
  <div>
      <el-row style="padding:20px;margin-top:20px">
        <el-col :span="24">
          <el-steps :active="step" style="margin-left:20%;font-size:39px;cursor:pointer;">
                <el-step title="步骤 1" style="text-align:center" icon="edit" description="添加景区执勤点基本信息">
                </el-step>
                <el-step title="步骤 2" icon="upload" description="添加图片信息">
                </el-step>
            </el-steps>
        </el-col>
        <el-col v-if="step==1" :span="18" style="margin-top:30px;margin-left:10%">
           <el-form :model="form" :rules="rules" ref="form" label-width="200px" label-suffix="：">
                <el-form-item v-for="(v,k,i) in form" :label="labels[i]" v-if="k!=='scenicAreaDutyPointID'" :key="i" :prop="k">
                    <el-select v-if="k=='netGridID'" v-model="form[k]">
                        <el-option  v-for="(n,i) of GridID" :value="n.netGridID" :label="n.netGridName" :key="i"></el-option>
                    </el-select>
                    <el-input v-else style="width:300px;" v-model="form[k]"></el-input>
                </el-form-item>
             <el-row>
               <el-col :span="20" align="center">
                 <el-form-item>
                  <el-button type="warning" @click="resetForm('form')">重置</el-button>
                  <el-button type="primary" @click="saveForm('form')">{{button}}</el-button>
                 </el-form-item>
               </el-col>
             </el-row>
           </el-form>
        </el-col>
        <el-col v-else-if="step==2" style="margin-top:30px;" :span="18">
          <!-- -->
          <div style="margin-left:25%">
            <h4>图片上传（支持多图）</h4>
            <el-upload
              class="upload-demo"
              :action="getDomain()+'/msmis/api/dutyPoint/addScenicAreaDutyPointPicture?ID='+form.scenicAreaDutyPointID"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :file-list="fileList2"
              :headers="header"
              list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
          </div>
          <!-- <div style="margin-left:25%;margin-top:100px;">
            <h4>视频上传</h4>
           <el-upload
             class="upload-demo"
             drag
             :action="' /msmis/api/SSEvent/addSSEventVideo?ID='+form.ssEventID"
             multiple>
             <i class="el-icon-upload"></i>
            <div class="el-upload__text">将视频拖到此处，或<em>点击上传</em></div>
           </el-upload>
          </div> -->
        </el-col>
        <el-col :span="24">
            <!-- <div class="preDiv">
                <i v-if="step!=1" class="fa fa-angle-double-left fa-5x" @click="goPre"></i>
                <div v-if="step!=1" class="directionFont"  @click="goPre">
                      上一步
                </div>
            </div> -->
            <div class="nextDiv">
                <i v-if="step!=2" class="fa fa-angle-double-right fa-5x" @click="goNext"></i>
                <div v-if="step!=2" class="directionFont" @click="goNext">
                    下一步
                </div>
                <i v-if="step==2" class="fa fa-history fa-5x" @click="submit"></i>
                <div v-if="step==2" class="directionFont" @click="submit">
                    完成
                </div>
            </div>
        </el-col>
      </el-row>
  </div>
</template>

<script>
import * as api from "@/api/securityManage";
import * as api2 from "@/api/orgManage";
import { getToken } from '../../utils/auth';

export default {
  data() {
    return {
      header:{
        token:getToken()
      },
      mytype: 2,
      flag: 0,
      button: "保存",
      step: 1,
      fileList2: [],
      dialogVisible: false,
      form: {
        scenicAreaDutyPointID: "",
        scenicAreaDutyPointName: "",
        netGridID: "", // '景区执勤点所属网格区域',
        scenicAreaDutyPointLongitude: "", // comment '执勤点 地理经度信息',
        scenicAreaDutyPointLatitude: "" // comment '执勤点 地理纬度信息'
      },
      labels: ["编号", "执勤点名称", "所属网格", "所属经度", "所属纬度"],
      rules: {},
      GridID: []
    };
  },
  methods: {
    getDomain() {
      return 'http://' + window.location.host;
    },
    saveSAPerson() {
      for (let i = 0; i < this.Forms.length; i++) {
        this.Forms[i].ssEventID = this.form.ssEventID;
        api.addSSEventInvolvedPersons(this.Forms[i]).then(res => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "景区执勤点添加成功!"
            });
          } else {
            this.$message({
              type: "error",
              message: res.message
            });
          }
        });
      }
    },
    goPre() {
      this.flag = 0;
      if (this.step > 1) {
        this.step = this.step - 1;
      }
    },
    goNext() {
      if (this.flag == 0 || this.form.scenicAreaDutyPointID == "") {
        this.$notify.error({
          title: "错误",
          message: "请先您保存基本信息，再添加其他信息！"
        });
        return;
      }
      if (this.step < 2) {
        this.step = this.step + 1;
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submit() {
      this.$router.go(0);
    },
    saveForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          api.addScenicAreaDutyPoint(this.form).then(res => {
            if (res.code == 200 && res.data != null) {
              this.form.scenicAreaDutyPointID = res.data;
              this.flag = 1;
              this.$message({
                type: "success",
                message: "添加成功!"
              });
            } else {
              this.$message({
                type: "error",
                message: res.message
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  },
  mounted() {
    api2.getOrgCode().then(res => {
      this.GridID = res.data.netGrid;
    });
    if (this.flag == 0) {
      this.step = 1;
    }
  }
};
</script>


<style scoped>
.preDiv {
  position: fixed;
  top: 300px;
  left: 10%;
  cursor: pointer;
  color: #58b7ff;
  text-align: center;
  /* margin-left: 10px; */
}
.nextDiv {
  position: fixed;
  top: 300px;
  right: 0;
  cursor: pointer;
  color: #58b7ff;
  text-align: center;
  margin-right: 10px;
}
</style>
